<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回调函数形式的refs</title>
</head>
<body>
     <!-- 引入React核心库 -->
     <script src="../JS/react.development.js"></script>
     <!-- 引入ReactDOM，用于支持react操作DOM -->
     <script src="../JS/react-dom.development.js"></script>
     <!-- 引入babel 用于将书写的JSX语法 编译成JS语法 -->
     <script src="../JS/babel.min.js"></script>

    <div id="test"></div>

    <script type="text/babel">  
        class Demo extends React.Component{
            showData =()=>{
               const {input1} = this
               alert(input1.value)
            }
            render(){
                return(
                    <div>
                        <input ref={c=>this.input1 = c} type="text" placeholder="点击按钮提示数据"/>   
                        <button onClick={this.showData} style={{border:'1px red solid',height:'20px',color:'aqua'}}>点我显示左侧的数据</button>    
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo />,document.getElementById('test'))


        /* 
            总结陈词
                ref = {(c)=>{this.input1=c}}
                    c 就是 当前 ref 所在的节点
                    箭头函数 执行的意义就是 把节点放在了 组件实例自身上 然后起了个名字叫做 input1  也可解释一下this指向
                    该处this指向render  render指向实例对象
                    该处 是内联式的回调函数 会有一些问题 (但不影响使用)
                    和03 相对应(视频:P29)

        */



    </script>







</body>
</html>